<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">新增</button>
    <button class="get">获取</button>
</body>
<script>
    // cookie的创建

    // 1. cookie的存取都依赖于 document.cookie
    // 2. cookie是以键值对(key=val)形式存在的字符串
    // 3. cookie是一条一条的存储的
    // 4. cookie 可以设置存储路径  和  过期时间(默认浏览器关闭 过期)


    // cookie的时效性(cookie可以设置过期时间)
    // 默认情况下 cookie在关闭浏览器之后就过期了(浏览器会在关闭前删除过期cookie)
    // 如果想设置 过期时间: 需要给cookie添加属性  exipres (exipres接收一个字符串类型的时间作为过期时间(世界时 date.toUTCString())) 

    // cookie的跨页面访问   (cookie 可以设置存储路径)
    // cookie默认存储在当前文件所在的目录,同目录下所有的文件以及子目录下的文件均可以访问该cookie
    // 如果想设置存储路径   需要给cookie添加属性   path (path用于接收一个根目录起的绝对路径)

    var set = document.getElementsByClassName("set")[0];
    var get = document.getElementsByClassName("get")[0];

    set.onclick = function () {
        // 存储用户名 密码  手机号 邮箱 (此处案例需要)

        // (1)
        // document.cookie = "user=a123123";
        // document.cookie = "pwd=123123";
        // document.cookie = "phone=17386141517";
        // document.cookie = "email=1272071495@qq.com";


        // (2) 如何设置过期时间?
        // var date = new Date();
        // date.setDate(date.getDate() + 7);
        // console.log(date);
        // document.cookie = "user=a123123;expires=" + date.toUTCString();
        // document.cookie = "pwd=123123;expires=" + date.toUTCString();
        // document.cookie = "phone=17386141517;expires=" + date.toUTCString();
        // document.cookie = "email=1272071495@qq.com;expires=" + date.toUTCString();

        // (3)  如何设置存储路径?   => 实现跨页面访问数据
        var date = new Date();
        date.setDate(date.getDate() + 7);
        console.log(date);
        document.cookie = "user=a123123;expires=" + date.toUTCString() + ";path=/";
        document.cookie = "pwd=123123;expires=" + date.toUTCString() + ";path=/";
        document.cookie = "phone=17386141517;expires=" + date.toUTCString() + ";path=/";
        document.cookie = "email=1272071495@qq.com;expires=" + date.toUTCString() + ";path=/";
    }

    // cookie的获取
    // 1. cookie的存取都依赖于 document.cookie
    // 2. 存的时候一条一条存,取的时候将所有的cookie整合到一整个字符串中返回(每条数据之间用 "; "分隔)

    get.onclick = function () {
        // console.log(document.cookie);

        var cookie = document.cookie;
        var data = {};
        if (cookie) {
            var list = cookie.split("; ");
            // console.log(list);
            for (var i = 0; i < list.length; i++) {
                var item = list[i];  // 'user=a123123', 'pwd=123123'
                var attr = item.split("=")[0];
                var val = item.split("=")[1];
                // console.log(item, attr, val);

                data[attr] = val;
            }
        }
        console.log(data);
    }


    // var m = new Map()
    // m.set()
    // m.get()
    // m.delete()
    // m.clear()



</script>

</html>